<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.active{
				color: #FF0000;
				}
		</style>
	</head>

	<body>
		<!-- 作业需求.点击列表那一项,那么该项变成红色 -->
		<div id="app">
				<ul>
					<li @click="dis(i)" :class="{active:isActive}" v-for="(item,i) in movies">{{item}}</li>
				</ul>
		</div>
		
		<script src="../js/vue.js"></script>	
		<script>
			const app=new Vue({
				el: '#app',
				data: {
					movies:['海王', '星际穿越', '海贼王', '大话西游'],
					isActive:false
				},
				methods:{
					dis(i){
						this.movies.indexOf(i).isActive=true;
					}
				}
			})
		</script>	
	</body>
</html>
